---
title: 'Drag to create plugin'
description: 'Create events by dragging an external placeholder element onto the calendar.'
---

# Drag to create

A plugin that allows you to create events by dragging an external placeholder element onto the calendar. Has support for week, day and month-grid views.

import {Callout} from "nextra/components";

<Callout type="info">
  This is a premium plugin which requires an active license to be used. Learn more at [Schedule-X premium](/premium).
</Callout>

## Features
import FeaturesList from "../../../../../components/partials/features-list/features-list";

<FeaturesList features={[
  'Drag events onto the day- and week views',
  'Drag events onto the month-grid view',
  'Customize event properties at creation-time',
]}/>

<video autoPlay loop playsInline muted id={'demo'} className="landingPageDemoVideo" width={800} height={250}>
  <source src={'https://d19hgxvhjb2new.cloudfront.net/website/drag-to-create-feature-demo.mp4'} type={'video/mp4'} />
</video>

## 2. Installation

### 2.1 Set up premium auth (only once)

Follow the [instructions for setting up an `.npmrc`](/docs/calendar/installing-premium)


### 2.2 Install

```bash copy
npm install @sx-premium/drag-to-create
```

## Usage

### API

#### `createDragToCreatePlugin(config: DragToCreateConfig)`

Create the plugin instance.

#### `DragToCreateConfig`

Configuration object for the plugin. Added as the first parameter to the `createDragToCreatePlugin` function.

| Property                | Type                                    | Default |
|------------------------|-----------------------------------------|---------|
| `onAddEvent`           | `(event: CalendarEvent) => void`        | -       |
| `onBeforeAddEvent`     | `(event: CalendarEvent) => boolean`     | -       |
| `onBeforeAddEventAsync`| `(event: CalendarEvent) => Promise<boolean>` | -       |
| `snapDuration`         | `15 \| 30 \| 60`                        | 30      |


#### `dragToCreate(eventId: string, otherEventProperties: Partial<CalendarEvent>)`

Call this method as a response to a dragstart event on your placeholder element, in order to start the drag-to-create process.
The `eventId` is a required, unique id for the event being created. `otherEventProperties` is an optional object-parameter with the properties of the event being created (however, `start` and `end` properties will have no effect here).

### Example

```html
// somewhere in your html structure
<div id="event-placeholder" draggable="true">Create new event</div>
```


```js
import { createCalendar } from '@schedule-x/calendar'
import { createEventsServicePlugin } from "@schedule-x/events-service";
import { createDragToCreatePlugin } from '@sx-premium/drag-to-create'

import '@sx-premium/drag-to-create/index.css'
import '@schedule-x/theme-default/dist/calendar.css'

const onAddEvent = (event) => {
  console.log('Event added', event)
}

const dragToCreatePlugin = createDragToCreatePlugin({
  onAddEvent,

  // Optional: add a validation hook. Return false to prevent the event from being added.
  onBeforeAddEvent: (event, $app) => {
    // Your validation logic
    return true
  },

  // Optional: async version of onBeforeAddEvent
  onBeforeAddEventAsync: async (event, $app) => {
    // Your async validation logic
    // Return false to prevent the event from being added.
    return true
  }
})

const calendar = createCalendar({
  plugins: [
    createEventsServicePlugin(),
    dragToCreatePlugin,
  ],
})

const eventPlaceholder = document.getElementById('event-placeholder')
eventPlaceholder.addEventListener('dragstart', () => {
  dragToCreatePlugin.dragToCreate('yourEventId123', {
    title: '(No title)',
    calendarId: 'leisure',
  })
})

calendar.render(document.getElementById('your-calendar-wrapper'))

```

## Changelog

See [changelog](/premium-changelog) page.

## Examples

These can be added on request. Please let us know if you need an example for a specific framework.

* React example: https://github.com/schedule-x/react-examples/blob/main/drag-to-create/src/App.tsx
* Vue example: https://github.com/schedule-x/vue-examples/tree/main/drag-to-create
* Angular example: https://github.com/schedule-x/angular-examples/tree/main/sidebar--modal--drag-to-create
* Svelte example: https://github.com/schedule-x/svelte-examples
